<template>
  <f7-page>
    <f7-navbar title="红包设置" back-link="返回">
      <f7-nav-right v-if="upOrAdd">
        <f7-button @click="open()">{{openSet?'修改':'取消'}}</f7-button>
      </f7-nav-right>
    </f7-navbar>
    <f7-list simple-list>
      <f7-list-item>
        <span>合作司机新人大礼包</span>
        <span v-if="openSet">
          <span v-if="redcardInf.status=='effective'">已开启</span>
          <span v-if="redcardInf.status=='cancelled'">已关闭</span>
        </span>
        <label class="toggle" v-if="!openSet">
          <input type="checkbox" v-model="redCard">
          <span class="toggle-icon"></span>
        </label>
      </f7-list-item>
    </f7-list>
    <f7-block>
      <h5 class="text-gray">
        开启后，司机首次挂靠到您物流企业时，系统将自动赠送红包给新人司机，此红包仅用于支付信息费
      </h5>
    </f7-block>
    <div v-if="redCard">
      <form class="list inline-labels no-hairlines-md">
        <ul>
          <li>
            <label class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">红包金额(元)</div>
                <div class="item-input-wrap">
                  <input type="text" v-model="addRedcardParam.money" placeholder="请输入" class="text-align-right" :disabled="openSet">
                </div>
              </div>
            </label>
          </li>
          <li>
            <a class="item-content item-input item-link">
              <div class="item-inner">
                <div class="item-title item-label">有效时间</div>
                <myDatepicker @dtpkChange="timeValidity" :param="{type: 'day',format: 'YYYY.MM.DD'}" :date="startTime"></myDatepicker>
              </div>
            </a>
          </li>
        </ul>
      </form>
      <div class="gap-20 ticket-bg row">
        <div class="col-25 text-align-center ticket-left">
          <h4 class="text-lightwhite">现金红包</h4>
          <h1 class="text-white gap-3">￥{{addRedcardParam.money?addRedcardParam.money:0}}</h1>
        </div>
        <div class="col-auto ticket-right">
          <h3>{{userInfo.nick_name}}&nbsp;现金红包</h3>
          <h5 class="text-gray1 gap-3">有效时间：{{redcardInf.time_modify?redcardInf.time_modify:now | dataFmt_fmt1('yyyy.MM.dd')}}-{{addRedcardParam.time_validity | dataFmt_fmt1('yyyy.MM.dd')}}</h5>
          <h5 class="text-gray1 gap-3">仅限支付{{userInfo.nick_name}}信息费使用</h5>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <f7-block>
      <h4>累计发放
        <span class="float-right" @click="goList('/mine/traffic_couponlog/', redcardInf._id)">发放记录></span>
      </h4>
      <h1>￥{{redcardInf.flow?redcardInf.flow:0}}</h1>
    </f7-block>
    <f7-toolbar class="row" v-if="!openSet">
      <f7-button class="col" big fill @click="submit()">确定</f7-button>
    </f7-toolbar>
    <f7-popup class="name-popup" :opened="popupOpened" @popup:closed="popupOpened = false">
      <f7-page>
        <f7-navbar title="设置成功">
          <f7-nav-right>
            <f7-link popup-close class="close">关闭</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <div class="success-bg gap-50">
          <f7-block class="text-align-center">
            <!-- <ion-spinner class="spinner-modal" icon="ripple"></ion-spinner> -->
            <h2 class="gap-30" v-if="redCard">您已经成功设置</h2>
            <h2 class="gap-30" v-if="!redCard">您已经成功关闭</h2>
            <h1>合作新人大礼包</h1>
            <h1 class="gap-20">￥{{addRedcardParam.money}}</h1>
            <div class="gap-50 text-align-center">
              <f7-button class="button-full" round block @click="closeModal()">
                完成
              </f7-button>
            </div>
          </f7-block>
        </div>
      </f7-page>
    </f7-popup>
  </f7-page>
</template>

<script>
import utilsCommon from '../../utils/common'
import myDatepicker from '../../components/datetimepicker'
import dateFmt from '../../filter/dateFmt'
export default {
  name: 'app',
  components: { myDatepicker },
  data () {
    return {
      startTime: { time: '' },
      userInfo: {},
      redCard: true,
      addRedcardParam: {
        name: '合作司机新人礼包',
        money: '',
        time_validity: '',
      },
      now: new Date(),
      openSet: true,
      redcardInf: {
        time_modify: ''
      },
      upOrAdd: true,
      popupOpened: false,
    }
  },
  methods: {
    timeValidity (data) {
      this.addRedcardParam.time_validity = data
    },
    async getuserInfo () {
      this.userInfo = (await this.AccountService.getBusinessCard()).data.data
    },
    formValid () {
      let result = {
        alow: false,
        msg: ''
      }
      if (this.addRedcardParam.money == '' || this.addRedcardParam.money == 0) {
        result.alow = false
        result.msg = '请填写红包金额'
      } else if (!this.addRedcardParam.time_validity) {
        result.alow = false;
        result.msg = '请填写有效期';
      } else {
        result.alow = true;
      }
      return result;
    },
    //添加红包
    async addRedcard () {
      let formValid = this.formValid()
      if (!formValid.alow) {
        this.toast(formValid.msg)
        return false
      }
      let param = this.addRedcardParam
      this.addRedcardParam.status = this.redCard ? 'effective' : 'cancelled'
      let addRedcardRep = await this.LineService.addRedcard(param)
      if (addRedcardRep.data.status === 'success') {
        this.popupOpened = true
      }
    },
    //修改红包
    async editRedcard () {
      let formValid = this.formValid()
      if (!formValid.alow) {
        this.toast(formValid.msg)
        return false
      }
      let param = this.addRedcardParam
      param.card_id = this.redcardInf._id
      this.addRedcardParam.status = this.redCard ? 'effective' : 'cancelled'
      let editRedcardRep = await this.LineService.editRedcard(param)
      if (editRedcardRep.data.status === 'success') {
        this.popupOpened = true
      }
    },
    //获取用户红包管理
    async getRedCard () {
      let getRedCardRep = await this.LineService.getRedCard()
      if (getRedCardRep.data.status === 'success') {
        this.openSet = getRedCardRep.data.data ? true : false;
        this.upOrAdd = getRedCardRep.data.data ? true : false;
        if (this.openSet) {
          this.redcardInf = getRedCardRep.data.data;
          this.redCard = getRedCardRep.data.data.status == 'effective' ? true : false;
          this.addRedcardParam.name = getRedCardRep.data.data.name;
          this.addRedcardParam.money = getRedCardRep.data.data.money;
          this.addRedcardParam.time_validity = getRedCardRep.data.data.time_validity;
          this.startTime.time = dateFmt.dataFmt_fmt1(getRedCardRep.data.data.time_validity, 'yyyy.MM.dd')
        }
      }
    },
    //打开修改功能
    open () {
      this.openSet = !this.openSet
      if (this.openSet) {
        this.getRedCard()
      }
    },
    //获取红包总发放量
    async getFlow () {
      let getFlowRep = await this.LineService.getFlow()
      if (getFlowRep.data.status === 'success') {
        console.log('红包总量', regetFlowRepp.data.data)
      }
    },
    //确定
    submit () {
      let that = this;
      if (new Date(this.addRedcardParam.time_validity) < this.now) {
        this.$f7.dialog.confirm('红包有效期已过期，确定继续？', '提示', () => {
          if (this.upOrAdd) {
            that.editRedcard()
          } else {
            that.addRedcard()
          }
        });
      } else {
        if (this.upOrAdd) {
          that.editRedcard()
        } else {
          that.addRedcard()
        }
      }
    },
    //模态框完成按钮
    closeModal () {
      this.popupOpened = false
      this.$f7.router.navigate({ url: '/mine/' })
    },
    //发放列表
    goList (route, id) {
      this.$f7.router.navigate({ url: route + id })
    }
  },
  mounted () {
    this.getuserInfo()
    this.getRedCard()
    this.getFlow()
  }
}
</script>

<style scoped>
.ios .button {
  border: none;
}
.ios .list {
  margin: 0;
  font-size: 14px;
  z-index: 20;
}
.list .item-link {
  z-index: 20;
}
.ios .block {
  margin: 10px 0 40px 0;
}
.ios .inline-labels .item-label {
  font-size: 14px;
}
.ios .list input[type='text'] {
  font-size: 14px;
}

.ticket-bg {
  background: url('../../assets/img/ticket-bg.png') no-repeat center center;
  width: 355px;
  height: 93px;
  margin: 30px 0 30px 10px;
}
.ticket-left {
  padding: 22px 0 0 20px;
}
.ticket-right {
  padding: 19px 20px 0 0;
}
.ios .row .col-25 {
  width: 25%;
}
.ios .button.button-fill {
  background: #a3a2f0;
  color: #fff;
  border-radius: 0;
  font-size: 14px;
}
.ios a.close {
  font-size: 14px;
  color: #fff;
}
.ios .button.button-full {
  background: #a3a2f0;
  color: #fff;
  font-size: 16px;
  display: block;
  height: 44px;
  line-height: 44px;
  margin: 0 50px;
}
</style>
